<template>
  <div>
    <div
      id="myEcharts2"
      :style="{ height: `${echartsH}px`, width: `${echartsW}px` }"
    ></div>
  </div>
</template>
  
  <script>
import * as Echarts from "echarts";

export default {
  data() {
    return {
      echartsW: (window.innerWidth - 400) / 2,
      echartsH: window.innerHeight / 2 + 0,
      // echartsW: (document.body.clientWidth - 400) / 2,
      // echartsH: document.body.clientHeight / 2 + 100,
    };
  },
  methods: {
    drawLine() {
      var myChart = Echarts.init(document.getElementById("myEcharts2"));
      var option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "line",
            symbol: "triangle",
            symbolSize: 20,
            lineStyle: {
              color: "#5470C6",
              width: 4,
              type: "dashed",
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: "#EE6666",
              color: "yellow",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.drawLine();
  },
};
</script>
  
  <style lang="less" scoped>
#myEcharts1 {
  margin-top: 40px;
  //   width: 500px;
  //   height: 400px;
  background-color: rgb(255, 255, 255);
}
</style>